<template>
    <div>
        <header-view></header-view>
        <div class="login-wrap">
            <div style="height: 250px">
                <el-button @click="patientList()" style="margin-top:80px;margin-left:210px;background-color: #132e56">
                    <i class="el-icon-document" style="font-size: 60px;color: white"></i>
                    <br>
                    <div style="margin-top: 12px">
                        <span style="font-weight: bold;font-size: 25px;color: white">患者信息</span>
                    </div>
                </el-button>
                <el-button @click="train()" style="margin-top:80px;margin-left:90px;background-color: #132e56">
                    <i class="el-icon-aim" style="font-size: 60px;color: white"></i>
                    <br>
                    <div style="margin-top: 12px">
                    <span style="font-weight: bold;font-size: 25px;color: white">康复训练</span>
                    </div>
                </el-button>
                <el-button @click="trainRecord()" style="margin-top:80px;margin-left:90px;background-color: #132e56">
                    <i class="el-icon-folder-opened" style="font-size: 60px;color: white"></i>
                    <br>
                    <div style="margin-top: 12px">
                    <span style="font-weight: bold;font-size: 25px;color: white">训练记录</span>
                    </div>
                </el-button>
            </div>
                <p style="margin-left: 320px">所有权：希迪克（郑州）智能康复设备有限公司</p>
<!--            <p style="margin-left: 240px">所有权：河南汇博神方智能康复设备有限公司</p>-->

        </div>
        <!-- 新增弹出框 -->
        <el-dialog title="设置训练信息" :visible.sync="setVisible" width="50%"  :before-close="closeAdd">
            <el-form ref="setForm" :rules="setFormRules" :model="setForm" label-width="140px">
                <el-form-item label="痉挛控制等级:" prop="spLowerConLevel">
                    <el-input type="number"  v-model="setForm.spLowerConLevel"  :min="1" :max="20" style="width: 60%" @keyup.native="proving1"></el-input>(1-20)
                </el-form-item>
                <el-form-item label="训练时间:" prop="trainingDuration">
                    <el-button style="font-size: 16px;" plain type="success" @click="downTime()"
                               :disabled="isDownTime">-
                    </el-button>
                    <el-input readonly style="width: 20%; margin-left: 5px;" v-model="setForm.trainingDuration">{{setForm.trainingDuration}}
                    </el-input>
                    <el-button type="success" plain style="font-size: 16px; margin-left: 5px;"
                               @click="upTime()" :disabled="isAddTime">+
                    </el-button>&nbsp;分钟
                   <!-- <el-input type="number" v-model="setForm.trainingDuration" style="width: 60%" @keyup.native="proving1" :min="1" :max="100"></el-input>分钟-->
                </el-form-item>
                <el-form-item label="训练方向间隔时间:" prop="spaceTime">
                    <el-select v-model="setForm.spaceTime"  style="width: 60%">
                        <el-option key="00" label="10分钟" value="00"></el-option>
                        <el-option key="01" label="15分钟" value="01"></el-option>
                        <el-option key="02" label="20分钟" value="02"></el-option>
                        <el-option key="03" label="关闭定时反向" value="03"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeAdd">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {doAdd, toSpeed} from '../api/train';
    export default {
        data: function() {
            return {
                setVisible:false,
                setForm:{
                    trainingBody:"01",
                    spLowerConLevel:1,
                    trainingDuration:5,
                    spaceTime:'03'
                },
                isAddTime: false,
                isDownTime: true,
                setFormRules:{
                    spLowerConLevel: [
                        { required: true, message: '请输入痉挛控制等级', trigger: 'blur' }
                    ],
                    trainingDuration: [
                        { required: true, message: '请输入训练时间', trigger: 'blur' }
                    ],
                    spaceTime: [
                        { required: true, message: '请设置训练方向间隔时间', trigger: 'blur' }
                    ],
                },
            };
        },
        methods: {
            /*新增患者*/
            patientList(){
                this.$router.push('/patientList');
            },
            /*训练*/
            train(){
                /*跳转训练的exe*/
                this.setVisible=true;
            },
            /*康复记录*/
            trainRecord(){
                this.$router.push('/trainrecord');
            },
            /*新增*/
            saveAdd(){
                this.$refs['setForm'].validate((valid) => {
                    if (valid) {
                        //新增form表单提交到后台
                        this.setForm.ptId="";
                        console.log("---setForm",this.setForm);
                        this.setVisible=false;
                        localStorage.setItem('spaceTime', this.setForm.spaceTime);
                        this.$message.success('设置成功');
                        this.$router.push({
                            path: '/train',
                            query: this.setForm
                        });
                    }
                });
            },
            closeAdd(){//关闭新增弹出框
                this.$confirm('确认关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.setVisible=false;
                        this.setForm={
                            trainingBody:"01",
                            spLowerConLevel:1,
                            trainingDuration:5,
                            spaceTime:'03'
                        };
                    })
                    .catch(() => {
                        this.$message({
                            message:'已取消操作'
                        });
                    });
            },
            /* 训练时间+*/
            upTime() {
                let time=this.setForm.trainingDuration;
                if (time < 100 && time > 5) {
                    // + 可以 -都不可再次点击
                    this.isAddTime = false;
                    this.isDownTime = false;
                    time = time + 5;
                    if (time==100){
                        this.isAddTime = true;
                    }
                }else if (time==100) {
                    // - 可以 +都不可再次点击
                    this.isDownTime = false;
                    this.isAddTime = true;
                }else { // 等于5
                    // + 可以 -都不可再次点击
                    this.isAddTime = false;
                    this.isDownTime = true;
                    time = time + 5;
                    if (time==10){
                        this.isDownTime = false;
                    }
                }
                this.setForm.trainingDuration=time;
            },
            /* 训练时间--*/
            downTime() {
                let time=this.setForm.trainingDuration;
                if (time < 100 && time > 5) {
                    // + 可以 -都不可再次点击
                    this.isAddTime = false;
                    this.isDownTime = false;
                    time = time - 5;
                    if (time==5){
                        this.isDownTime = true;
                    }
                }else if (time==100) {
                    // - 可以 +都不可再次点击
                    this.isDownTime = false;
                    this.isAddTime = true;
                    time = time - 5;
                    if (time==95){
                        this. isAddTime= false;
                    }
                }else { // 等于5
                    // + 可以 -都不可再次点击
                    this.isAddTime = false;
                    this.isDownTime = true;
                }
                this.setForm.trainingDuration=time;
            },
            proving1(e) {
                var keynum = window.event ? e.keyCode : e.which;   //获取键盘码
                var keychar = String.fromCharCode(keynum);  //获取键盘码对应的字符
                if (keynum ==189|| keynum==190||keynum == 109 || keynum == 110) {
                    this.$message.warning('禁止输入小数以及负数');
                    e.target.value = ' ';
                    return;
                }
                if (keynum==69){
                    this.$message.warning('禁止输入e或E');
                    e.target.value = ' ';
                    return;
                }
            },
        },

    };
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 1000px;
    background-color: rgba(240, 240, 240, 0.59);
}
.btn-bell .el-icon-bell {
    color: #fff;
}

cascader{
    margin-left: 10px;
}
.user-avator img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.header-avator img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

</style>
